<template>
  <div class="airpod">
    <div class="content">
      <h3 class="airpod_info">欢迎{{ userName }}同学进入MBTI测试系统</h3>
      <h3 class="airpod_info2"></h3>
      <span class="education_count iconfont"></span>
    </div>
  </div>
</template>

<style>
.airpod {
  position: relative;
  width: 100%;
  height: 80vh;
  background: url(../assets/demo2.jpg) no-repeat;
  background-position: center center;
}
.content {
  position: absolute;
  top: 30%;
  left: 40%;
  margin-left: -150px;
  margin-top: -100px;
}

.airpod .airpod_info,
.airpod .airpod_info2,
.education_count {
  color: black;
  font-weight: 600;
  font-size: 26px;
  text-align: center;
  margin: auto;
}
.education_count {
  display: block;
}
.airpod .airpod_info2 {
  padding-bottom: 10px;
}
</style>
<script>
import { ref } from 'vue'
export default {
  data() {
    return {
      userName: ref(''),
    }
  },
  created() {
    this.userData()
  },
  methods: {
    userData() {
      const userData = window.localStorage.getItem('userdata')
      this.userName = userData
    },
  },
}
</script>
